import React, {Component} from 'react';
import {Row, Col, Card} from 'antd';
import {HeartOutlined, MailOutlined, MehOutlined, PayCircleOutlined} from "@ant-design/icons";
import StackedLineChart from "../echarts/StackedLineChart";
import './index.less'
import RadarChart from "../echarts/RadarChart";
import ChinaMap from "../echarts/ChinaMap";
import DottedChart from "../echarts/DottedChart";

class Dashboard extends Component {
    render() {
        return (
            <div className="content-main">
                <Row gutter={24} className="gutter-box">
                    {/*---------卡片---------*/}
                    <Col lg={6} md={12}>
                        <Card className="number-card">
                           <span className="icon-warp" style={{color: '#a352a6'}}>
                           <HeartOutlined/>
                           </span>
                            <div className="card-content">
                                <p className="card-title">关注</p>
                                <p className="card-number">2781</p>
                            </div>

                        </Card>

                    </Col>

                    <Col lg={6} md={12}>
                        <Card className="number-card">
                           <span className="icon-warp" style={{color: '#DDA0DD'}}>
                           <MailOutlined/>
                           </span>
                            <div className="card-content">
                                <p className="card-title">消息</p>
                                <p className="card-number">1235</p>
                            </div>

                        </Card>

                    </Col>

                    <Col lg={6} md={12}>
                        <Card className="number-card">
                           <span className="icon-warp" style={{color: '#FFFF00'}}>
                            <MehOutlined/>
                           </span>
                            <div className="card-content">
                                <p className="card-title">粉丝</p>
                                <p className="card-number">888</p>
                            </div>

                        </Card>

                    </Col>

                    <Col lg={6} md={12}>
                        <Card className="number-card">
                           <span className="icon-warp" style={{color: '#00FA9A'}}>
                            <PayCircleOutlined/>
                           </span>
                            <div className="card-content">
                                <p className="card-title">RMB</p>
                                <p className="card-number">1024</p>
                            </div>

                        </Card>

                    </Col>

                    {/*---------折线图----------*/}
                    <Col lg={18} md={24} style={{marginTop: '2px'}}>
                        <Card
                            bodyStyle={{
                                padding: '24px 36px 24px 0',
                            }}>
                            <div style={{height: '370px', width: '100%'}}>
                                <StackedLineChart/>
                            </div>

                        </Card>
                    </Col>
                    <Col lg={6} md={24}>
                        <Row gutter={24}>
                            <Col lg={24} md={12}>
                                <Card className="weather card-right card-right-content">
                                    这个地方用来放东西，待定......

                                    {/*<RadarChart/>*/}
                                </Card>
                            </Col>
                            <Col lg={24} md={12}>
                                <Card className="card-right quote card-right-content"></Card>
                            </Col>

                        </Row>
                    </Col>


                    <Col lg={12} md={24}> <Card>dsdsadsa</Card></Col>
                    <Col lg={12} md={24}> <Card>dsadas</Card></Col>
                    {/*---------------------*/}

                    <Col lg={24} md={24}>


                        <Card>
                            <ChinaMap/>

                        </Card></Col>
                    <Col lg={24} md={24}> <Card>
                        <DottedChart/>

                    </Card></Col>
                    <Col lg={24} md={24}> <Card></Card></Col>


                </Row>
            </div>
        );
    }
}

export default Dashboard;
